<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>

<script type="text/javascript">

	//验证图片格式
	function checkPic(){
		var picPath=document.getElementById("picPath").value;
		var type=picPath.substring(picPath.lastIndexOf(".")+1,picPath.length).toLowerCase();
		if(type!="jpg"&&type!="bmp"&&type!="gif"&&type!="png"){
			alert("请上传正确的图片格式");
			return false;
		}
		document.getElementById("Preview").style.display="block";
		return true;
	}

	//图片预览
	function PreviewImage(divImage,upload,width,height) {  
		if(checkPic()){
			try{
				var imgPath; 
				//图片路径     
				var Browser_Agent=navigator.userAgent;
				//判断浏览器的类型(这里暂时只验证有效支持：IE、FF、Chrome)
				if(navigator.appName.indexOf("Microsoft Internet Explorer") != -1 && document.all) {
					var Preview = document.getElementById(divImage);
					Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value;
					Preview.style.width = width;
					Preview.style.height = height;
				}else {
					imgPath = window.URL.createObjectURL(upload.files[0]);
					document.getElementById(divImage).innerHTML = "<img id='imgPreview' src='"+imgPath+"' width='"+width+"' height='"+height+"'/>";
				}
			}catch(e){
				alert("请上传正确的图片格式");
			}
		} 
	}

    </script>

<body>
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>
                选择图片：
            </td>
            <td id="resetFile">
                <input type="file" id="picPath" name="pic_path" onchange="PreviewImage('Preview',this,100,90);"
                    style="width: 265px" />
                &nbsp;&nbsp;
                <input type="submit" value=" 保   存 " />
                <font color="red">只允许上传&nbsp;&nbsp;jpg&nbsp;&nbsp;|&nbsp;&nbsp;gif&nbsp;&nbsp;|&nbsp;&nbsp;png&nbsp;&nbsp;格式图片</font>
            </td>
        </tr>
        <tr>
            <td>
                图片预览：
            </td>
            <td style="text-align: left;">
                <div id="Preview" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);">
                </div>
            </td>
        </tr>
    </table>
</body>
</html>